<template>
	<view class="">
		<uv-waterfall ref="waterfall" v-model="list" :add-time="10" :column-gap="columnGap" @changeList="changeList">
			<template v-slot:list1>
				<view>
					<view v-for="(item, index) of list1" :key="item.id" class="bg-FFF mb-28 round-12 pb-20"
						@click="goShopDetal(item)">
						<image :src="globalConfig.imagePrefix + item.cover" mode="widthFix" class="round-12" :style="
							{
								width:itemWidth
							}">
						</image>
						<view class="px-16">
							<view class="text-28 mt-12 u-line-2"
								v-if="item.mallStoreTemp && item.mallStoreTemp.trade == 1">
								{{ item.mallStoreTemp.name }}店
							</view>
							<view class="text-28 mt-12 u-line-2">
								{{ item.name }}
							</view>
							<view class="text-32 mt-12 sprice">
								{{ item.nowPrice }} {{item.columnType == 6 ? (item.payType == 1 ? '金积分' : '功德金') : '元'}}
								<text style="color: #41B721;"
									v-if="item.xiaofeijinPrice">+{{ item.xiaofeijinPrice}}元消费金</text>
							</view>

							<view class="text-24 mt-12 sprice" v-if="item.columnType != 6">
								赠送{{item.shangdou}}元熵豆
							</view>
						</view>
					</view>
				</view>
			</template>
			<template v-slot:list2>
				<view>
					<view v-for="(item, index) of list2" :key="item.id" class="bg-FFF mb-28 round-12 pb-20"
						@click="goShopDetal(item)">
						<image :src="globalConfig.imagePrefix + item.cover" mode="widthFix" class="round-12" :style="
								{
									width:itemWidth
								}">
						</image>
						<view class="px-16">
							<view class="text-28 mt-12 u-line-2"
								v-if="item.mallStoreTemp && item.mallStoreTemp.trade == 1">
								{{ item.mallStoreTemp.name }}店
							</view>

							<view class="text-28 mt-12 u-line-2">
								{{ item.name }}
							</view>

							<view class="text-32 mt-12 sprice">
								{{ item.nowPrice }}{{item.columnType == 6 ? (item.payType == 1 ? '金积分' : '功德金') : '元'}}
								<text style="color: #41B721;"
									v-if="item.xiaofeijinPrice">+{{ item.xiaofeijinPrice}}元消费金</text>
							</view>

							<view class="text-24 mt-12 sprice" v-if="item.columnType != 6">
								赠送{{item.shangdou}}元熵豆
							</view>
						</view>
					</view>
				</view>
			</template>
		</uv-waterfall>

		<view class="flex flex-col items-center" v-if="loadStatus == 'empty'">
			<image src="https://file.fulewanjia.com/fulewanjia/profile/appImg/index/img_zanwushangpin.png" class="empty-img"
				mode=""></image>
			<view class="text-28 text-gray">
				暂无商品
			</view>
		</view>

		<view class="py-32 text-center" v-else>
			{{ loadStatus == 'loadmore' ? '加载更多' : '暂无更多了' }}
		</view>

		<u-loading-page :loading="loading"
			image="https://file.fulewanjia.com/fulewanjia/profile/appImages/common/loading.gif" icon-size="100"
			loading-text=" " loading-mode="spinner"></u-loading-page>
	</view>
</template>

<script>
	export default {
		name: "ProductsList",
		data() {
			return {
				globalConfig: getApp().globalData.config,
				page: 1,
				pageSize: 10,
				loadStatus: "loadmore",
				loading: false,
				list: [], // 瀑布流全部数据
				list1: [], // 瀑布流第一列数据
				list2: [], // 瀑布流第二列数据
				columnGap: 10, //中间空
				itemWidth: ''
			};
		},
		props: {
			params: {
				default: {},
			},
			width: {
				default: 750,
			}
		},
		mounted() {
			const v = uni.upx2px(this.width) - this.columnGap
			this.itemWidth = v / 2 + 'px'
			this.refreshList()
		},
		methods: {
			changeList(e) {
				this[e.name].push(e.value);
			},
			goShopDetal(item) {
				this.$tab.nav(`/pages/commodity/detail?id=${item.id}&storeId=${item.storeId}`)
			},
			refreshList() {
				this.page = 1;
				this.loadStatus = "loadmore";
				this.list = []
				this.$refs.waterfall.clear();
				this.list1 = []
				this.list2 = []
				this.loadList();
			},
			loadList() {
				if (this.loadStatus == "loadmore") {
					this.loadStatus = "loading";
					setTimeout(() => {
						uni.stopPullDownRefresh();
						const params = {
							pageNum: this.page,
							pageSize: this.pageSize,
							...this.params
						};

						this.$Api.index.getProductsList(params).then((res) => {
							if (this.page == 1) {
								if (res.rows && res.rows.length > 0) {
									this.list.push(...res.rows)
								}
							} else {
								this.list.push.apply(this.list, res.rows || []);
							}
							this.loadStatus = "loadmore";

							this.$emit('changeTotal', res.total)

							if (res.total == 0) {
								this.loadStatus = "empty";
							} else if (this.list.length >= res.total) {
								this.loadStatus = "nomore";
							} else {
								this.page++;
							}
						});
					}, 200);
				}
			},
		}
	}
</script>

<style lang="scss">
	.waterfall-item {
		overflow: hidden;
		margin-top: 10px;
		border-radius: 6px;
	}

	.waterfall-item__ft {
		padding: 20rpx;
		background: #fff;

		&__title {
			margin-bottom: 10rpx;
			line-height: 48rpx;
			font-weight: 700;

			.value {
				font-size: 32rpx;
				color: #303133;
			}
		}

		&__desc .value {
			font-size: 28rpx;
			color: #606266;
		}

		&__btn {
			padding: 10px 0;
		}
	}
</style>